<template>
	<view class="main">
		<u--form labelPosition="left" :model="formData" ref="form1">
			<view class="module">
				<u-form-item label="驳回原因" prop="rason" labelWidth="100" borderBottom ref="item1">
					<u--input disabledColor="#ffffff" v-model="formData.rason" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="项目编号" prop="projectCode" labelWidth="100" borderBottom ref="item1">
					<u--input disabledColor="#ffffff" v-model="formData.projectCode" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="项目名称" prop="projectName" labelWidth="100" borderBottom ref="item1">
					<u--input disabledColor="#ffffff" v-model="formData.projectName" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="供应商编号" prop="partnerCode" labelWidth="100" borderBottom ref="item1">
					<u--input disabledColor="#ffffff" v-model="formData.partnerCode" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="供应商名称" prop="partnerName" labelWidth="100" :borderBottom="false" ref="item1">
					<u--input disabledColor="#ffffff" v-model="formData.partnerName" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
			</view>
			<view class="module-title">
				<view class="module-name">商品信息</view>
			</view>
			<view class="module">

				<u-form-item required label="仓库选择：" prop="warehouseCode" labelWidth="120" borderBottom
					@click="showPop('warehouse',ckList); hideKeyboard()" ref="item1">
					<u--input v-if="!formData.warehouseName" v-model="formData.warehouseName" disabledColor="#ffffff"
						placeholder="请选择" border="none"></u--input>
					<span class="selectText" v-if="formData.warehouseName&&item.name==formData.warehouseName"
						v-for="item in ckList">{{item.name}}</span>
					<u-icon slot="right" name="arrow-right" color="#d7d7d7"></u-icon>
				</u-form-item>
				<u-form-item required label="存货选择" prop="inventoryName" labelWidth="120" borderBottom
					@click="showPopDiy('inventory',chList); hideKeyboard()" ref="item1">
					<u--input v-if="!formData.inventoryName" v-model="formData.inventoryName" disabledColor="#ffffff"
						placeholder="请选择" border="none"></u--input>
					<span class="selectText" v-if="formData.inventoryCode&&item.id==formData.inventoryCode"
						v-for="item in chList">{{item.name}}</span>
					<u-icon slot="right" name="arrow-right" color="#d7d7d7"></u-icon>

				</u-form-item>


				<u-form-item label="成分" prop="component" labelWidth="100" required borderBottom ref="item1">
					<u--input v-model="formData.component" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="来源" prop="source" labelWidth="100" required borderBottom ref="item1">
					<u--input v-model="formData.source" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="税率" prop="taxRate" labelWidth="100" required borderBottom ref="item1">
					<u--input @input="updateTaxPrice" v-model="formData.taxRate" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="单价" prop="price" labelWidth="100" required borderBottom ref="item1">
					<u--input @input="updateTaxPrice" v-model="formData.price" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="含税单价" prop="taxPrice" labelWidth="100" required borderBottom ref="item1">
					<u--input disabled disabledColor="#ffffff" v-model="formData.taxPrice" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="数量" prop="quantity" labelWidth="100" required borderBottom ref="item1">
					<u--input @input="updateNum" v-model="formData.quantity" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="单位" prop="unitName" required labelWidth="100" borderBottom
					@click="showPopDiy('unit',chdwList); hideKeyboard()" ref="item1">
					<u--input v-if="!formData.unitName" v-model="formData.unitName" disabledColor="#ffffff"
						placeholder="请选择" border="none"></u--input>
					<span class="selectText" v-if="formData.unitName&&item.name==formData.unitName"
						v-for="item in chdwList">{{item.name}}</span>
					<u-icon slot="right" name="arrow-right" color="#d7d7d7"></u-icon>

				</u-form-item>
				<u-form-item label="总价" prop="amount" labelWidth="100" required borderBottom ref="item1">
					<u--input disabled disabledColor="#ffffff" v-model="formData.amount" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="含税总价" prop="taxAmount" labelWidth="100" required borderBottom ref="item1">
					<u--input disabled disabledColor="#ffffff" v-model="formData.taxAmount" border="none"
						placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remark" labelWidth="100" :borderBottom="false" ref="item1">
					<u--input v-model="formData.remark" border="none" placeholder="请输入"></u--input>
				</u-form-item>
			</view>
			<view class="module-title">
				<view class="module-name">付款信息</view>
			</view>
			<view class="module">
				<u-form-item label="总货款" prop="totalPayment" labelWidth="100" borderBottom ref="item1">
					<u--input v-model="formData.totalPayment" border="none" placeholder="请输入"></u--input>
					<span slot="right">元</span>
				</u-form-item>
				<u-form-item label="已支付金额" prop="origEarnestMoney" labelWidth="100" borderBottom ref="item1">
					<u--input v-model="formData.origEarnestMoney" border="none" placeholder="请输入"></u--input>
					<span slot="right">元</span>
				</u-form-item>
				<u-form-item label="银行流水凭证(图片)" prop="bankStatementVoucher" labelWidth="160" :borderBottom="false"
					ref="item1">
				</u-form-item>
				<uploadFile :fileList1="fileList1" :limit="9" @getImg="getBankImg" />
				<view class="snap-line"></view>
				<u-form-item label="未支付金额" prop="noMoney" labelWidth="100" :borderBottom="false" ref="item1">
					<u--input v-model="formData.noMoney" border="none" placeholder="请输入"></u--input>
					<span slot="right">元</span>
				</u-form-item>
			</view>
			<view class="module-title">
				<view class="module-name">物流信息</view>
			</view>
			<view class="module" style="padding-bottom: 30px;">
				<u-form-item label="车号" prop="wagonNumber" labelWidth="100" borderBottom ref="item1">
					<u--input v-model="formData.wagonNumber" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="司机姓名" prop="driverName" labelWidth="100" borderBottom ref="item1">
					<u--input v-model="formData.driverName" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="司机身份证号码" prop="driverCard" labelWidth="130" borderBottom ref="item1">
					<u--input v-model="formData.driverCard" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="driverTel" labelWidth="100" borderBottom ref="item1">
					<u--input v-model="formData.driverTel" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="过磅单" prop="weighingSheet" labelWidth="160" :borderBottom="false" ref="item1">
				</u-form-item>
				<uploadFile :fileList1="fileList2" :limit="9" @getImg="getweighingImg" />
				<view class="snap-line"></view>
				<u-form-item label="合同" prop="contract" labelWidth="160" :borderBottom="false" ref="item1">
				</u-form-item>
				<uploadFile :fileList1="fileList3" :limit="9" @getImg="getcontractImg" />
				<view class="snap-line"></view>
				<u-form-item label="发票" prop="invoiceImg" labelWidth="160" :borderBottom="false" ref="item1">
				</u-form-item>
				<uploadFile :fileList1="fileList4" :limit="9" @getImg="getinvoiceImg" />

			</view>
		</u--form>

		<!--底部按钮-satrt-->
		<view class="btn">
			<view class="btn-item" @click="submit">提交</view>
		</view>
		<!--底部按钮-end-->

		<u-action-sheet :show="isShowPop" :actions="actions" title="请选择" @close="isShowPop = false"
			@select="popSelect"></u-action-sheet>

		<u-popup :show="showDiy" mode="bottom" @close="closeDiy" :closeOnClickOverlay="true">
			<view class="diy">
				<seachBox :title="'按名称查询'" @onListen="onListen"></seachBox>
				<view class="diy-body">
					<view @click="comDiy(item)" class="diy-item" v-for="item in diyList">{{item.name}}</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import db from '@/common/localstorage.js'

	export default {

		onLoad(options) {
			if (options.state) {
				this.getInfo(options.id)
				this.isEdit = true
			} else {
				this.formData.rason = options.rason
				this.formData.projectCode = options.id
				this.formData.projectName = options.name
				this.formData.partnerCode = options.applicantId
				this.formData.partnerName = options.applicantName
			}
			this.getDataList()

		},

		data() {
			return {
				showDiy: false,
				diyList: [],


				isEdit: false,
				actions: [],
				isShowPop: false,
				popType: '',
				userList: [],
				chList: [], //存货数据
				ckList: [], //仓库
				chdwList: [], //存货计量单位
				gysList: [], //供应商
				fileList1: [], //银行
				fileList2: [], //过磅单
				fileList3: [], //合同
				fileList4: [], //发票
				formData: {
					warehouseCode:'',
					inventoryName:'',
					component: '',
					source:'',
					taxRate:'',
					price:'',
					quantity:'',
					unitName:''			
				},
				rules: {
					warehouseCode: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
					inventoryName: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
					unitName: {
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					},
					component: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					source: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					taxRate:  [{
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.rangeXiaoyuMax(value, [0, 1]);
						},
						message: "税率数值不能超过1",
						trigger: ["change", "blur"],
					}],
					price: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['change']
					},
					quantity: {
						type: 'string',
						required: true,
						message: '请填写',
						trigger: ['change']
					}
				},

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			onListen(v) {
				if (this.popType == 'inventory') {
					this.getChList(v)
				}
				if (this.popType == 'unit') {
					this.getChdwList(v)
				}
			},
			showPopDiy(type, list) {
				this.showDiy = true
				this.diyList = list
				this.popType = type
			},
			closeDiy() {
				this.showDiy = false
			},
			comDiy(item) {
				this.formData[this.popType + 'Code'] = item.id
				this.formData[this.popType + 'Name'] = item.name
				this.$refs.form1.validateField(this.popType)
				this.showDiy = false
			},

			getInfo(id) {
				let that = this
				this.$postjson('/api/RqPurchaseOrder/info', {
					id: id * 1
				}).then(res => {
					this.formData = res.data.data
					let tem1 = this.formData.bankStatementVoucher ? this.formData.bankStatementVoucher.split(',') :
						[]
					tem1.forEach(v => {
						that.fileList1.push({
							url: that.baseUrl + v
						})
					})

					let tem2 = this.formData.weighingSheet ? this.formData.weighingSheet.split(',') : []
					tem2.forEach(v => {
						that.fileList2.push({
							url: that.baseUrl + v
						})
					})
					let tem3 = this.formData.contract ? this.formData.contract.split(',') : []
					tem3.forEach(v => {
						that.fileList3.push({
							url: that.baseUrl + v
						})
					})
					let tem4 = this.formData.invoiceImg ? this.formData.invoiceImg.split(',') : []
					tem4.forEach(v => {
						that.fileList4.push({
							url: that.baseUrl + v
						})
					})

				})
			},

			updateTaxPrice() {
				if (this.formData.price && this.formData.taxRate) {
					let price = (this.formData.price) * 1
					let taxRate = (this.formData.taxRate) * 1
					this.formData.taxPrice = price + (price * taxRate);
				} else {
					this.formData.taxPrice = '';
				}
			},
			updateNum() {
				if (this.formData.quantity && this.formData.taxPrice) {
					let quantity = (this.formData.quantity) * 1
					let taxRate = (this.formData.taxPrice) * 1
					this.formData.taxAmount = quantity * taxRate;
				} else {
					this.formData.taxAmount = '';
				}

				if (this.formData.quantity && this.formData.price) {
					let quantity = (this.formData.quantity) * 1
					let price = (this.formData.price) * 1
					this.formData.amount = quantity * price;
				} else {
					this.formData.amount = '';
				}
			},
			getDataList(type) {
				let that = this
				this.getChList('')
				this.getChdwList('')

				this.$postjson('/api/RqPurchaseOrder/getWareHouse', {
					type: type
				}).then(res => {
					let data = res.data.data
					data.forEach(v => {
						v.id = v.code
					})
					this.ckList = data

				})

				this.$postjson('/api/RqPurchaseOrder/getApplicantBytb', {
					type: type
				}).then(res => {
					let data = res.data.data
					data.forEach(v => {
						v.id = v.userId
						v.name = v.userName
					})
					this.gysList = data
				})
			},

			getChList(name) {
				this.$postjson('/api/RqPurchaseOrder/getInventory', {
					name: name
				}).then(res => {
					let data = res.data.data
					data.forEach(v => {
						v.id = v.code
					})
					this.chList = data
					this.diyList = data
				})
			},
			getChdwList(name) {
				this.$postjson('/api/RqPurchaseOrder/getInventoryUnit', {
					unitName: name
				}).then(res => {
					let data = res.data.data
					data.forEach(v => {
						v.id = v.unitCode
						v.name = v.unitName
					})
					this.chdwList = data
					this.diyList = data
				})
			},
			showPop(type, list) {
				this.actions = list
				this.popType = type
				this.isShowPop = true
			},
			popSelect(e) {
				this.formData[this.popType + 'Code'] = e.id
				this.formData[this.popType + 'Name'] = e.name

				this.$refs.form1.validateField(this.popType)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},

			getBankImg(val) {
				this.fileList1 = val
				this.formData.bankStatementVoucher = this.fileList1.map(o => {
					return o.url
				}).join(',')
			},
			getweighingImg(val) {
				this.fileList2 = val
				this.formData.weighingSheet = this.fileList2.map(o => {
					return o.url
				}).join(',')
			},
			getcontractImg(val) {
				this.fileList3 = val
				this.formData.contract = this.fileList3.map(o => {
					return o.url
				}).join(',')
			},
			getinvoiceImg(val) {
				this.fileList4 = val
				this.formData.invoiceImg = this.fileList4.map(o => {
					return o.url
				}).join(',')
			},




			submit() {

				let that = this

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {

					uni.showLoading({
						title: '提交中'
					});
					let url = this.isEdit ? '/api/RqPurchaseOrder/edit' : '/api/RqPurchaseOrder/add'
					that.$postjson(url, that.formData).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							setTimeout(v => {
								uni.navigateBack()
							}, 1000)
							uni.$u.toast('操作成功')
						} else {
							uni.$u.toast(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('请完善表单')
				})
			},



		},
	}
</script>

<style lang="scss" scoped>
	.diy {
		max-height: 800upx;
		min-height: 600upx;
		background: #fff;

		.diy-body {
			padding: 20upx 0upx;
			width: calc(100%);
			height: calc(100% - 40px - 176upx);
			overflow-y: auto;
		}

		.diy-item {
			padding: 30upx 30upx;
			width: calc(100% - 60upx);
			border: 1upx solid rgb(214, 215, 217);
			text-align: center;
		}

	}

	page {
		background: #F3F3F5;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 118rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-bottom: 68rpx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 30upx;
		width: calc(100% - 60upx);

		.btn-item {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 552rpx;
			height: 88rpx;
			background: linear-gradient(138deg, #12C66B 0%, #11AA66 100%);
			border-radius: 44rpx;
			margin: auto;
			line-height: 88upx;
		}
	}

	.main {
		padding-bottom: 140px;

		.snap-line {
			border-bottom: 1upx solid rgb(214, 215, 217);
			transform: scaleY(0.5);
			margin-top: 16upx;
		}

		.module-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			padding: 34upx 62upx;
			position: relative;
		}

		.module-title::after {
			content: '';
			width: 8rpx;
			height: 28rpx;
			background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
			position: absolute;
			left: 35upx;
			bottom: 43upx;

		}

		.module-flie {

			.module-flie-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				position: relative;
				width: 100%;
				margin-bottom: 30upx;
				padding: 0 42upx;
			}

			.module-flie-title::after {
				content: '';
				width: 8rpx;
				height: 28rpx;
				background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
				position: absolute;
				left: -20upx;
				bottom: 8upx;

			}



		}


		.module {
			background: #fff;
			// padding: 20upx;
			padding: 0 42upx;

			::v-deep .u-form-item__body {
				padding: 32upx 0 !important;
			}

			::v-deep .u-form-item__body__left__content__required {
				// left: auto !important;
				// right: 3px !important;
				font-size: 32upx;
				margin-top: -2px;
			}

			::v-deep .u-form-item__body__right {
				padding-left: 20upx;
			}

			::v-deep .u-form-item__body__left__content__label {
				font-size: 32upx;
			}


			::v-deep .u-border {
				border: none;
			}

			::v-deep .u-textarea__field {
				min-height: 24px;
			}

			::v-deep .uni-textarea-textarea {
				font-size: 32upx;
			}


			::v-deep .u-textarea {
				padding: 0;
			}

			::v-deep .uni-textarea-placeholder {
				color: rgb(192, 196, 204) !important;
				font-weight: 400;
				font-size: 28upx;
			}

			.topClass {
				::v-deep .u-form-item__body {
					flex-direction: column !important;

					.u-form-item__body__right {
						padding-left: 0px;
					}
				}
			}

		}


	}


	.selectText {
		font-size: 32upx;
	}
</style>